<!-- 总览Tab组件 -->
<script setup lang="ts">
import { MissionVO } from '@/api/mission/types';
import MissionDashboard from '@/components/Mission/MissionDashboard.vue';
import { MissionStatusNames } from '@/api/mission/types';
import { MISSION_STATUS } from '@/constants';

interface Props {
  missions: MissionVO[];
}

defineProps<Props>();
</script>

<template>
  <div class="overview-content">
    <div class="dashboard-section">
      <mission-dashboard :missions="missions" />
    </div>
    <div class="recent-missions">
      <h3>最近任务</h3>
      <div class="recent-list">
        <div v-for="mission in missions.slice(0, 5)" :key="mission.id" class="recent-item">
          <div class="recent-item-content">
            <span class="title">{{ mission.missionTitle }}</span>
            <el-tag
              :type="
                mission.status === MISSION_STATUS.COMPLETED
                  ? 'success'
                  : mission.status === MISSION_STATUS.IN_PROGRESS
                    ? 'warning'
                    : mission.status === MISSION_STATUS.CLOSED
                      ? 'danger'
                      : 'info'
              "
              size="small"
            >
              {{ MissionStatusNames[mission.status!] }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 总览内容 */
.overview-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  height: 100%;
  min-width: 0;
}

.dashboard-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

.recent-missions {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.recent-missions h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.recent-list {
  flex: 1;
  overflow-y: auto;
}

.recent-item {
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.recent-item:last-child {
  border-bottom: none;
}

.recent-item-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-weight: 500;
  color: #374151;
  flex: 1;
  margin-right: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .overview-content {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .recent-missions {
    max-height: 400px;
  }
}
</style>
